<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:28
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:15:16
 * @FilePath: \i-hos-app\shared\emr\src\components\common\Menses.vue
 * @Description: 月经史组件
-->
<template>
  <div class="menses">
    <div @click.native.prevent>
      <h3>月经史表达式</h3>
      <el-row>
        <el-col :span="24">
          月经持续
          <el-input-number v-model="c_menses.day" class="mx-4" :min="0" controls-position="right" />
          天
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          初潮周期
          <el-input-number v-model="c_menses.mCycle" class="mx-4" :min="0" controls-position="right" />
          岁
        </el-col>
        <el-col :span="2">—</el-col>
        <el-col :span="11">
          绝经年龄
          <el-input-number v-model="c_menses.age" class="mx-4" :min="0" controls-position="right" />
          岁
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          生理周期
          <el-input-number v-model="c_menses.pCycle" class="mx-4" :min="0" controls-position="right" />
          岁
        </el-col>
      </el-row>
    </div>
    <footer slot="footer" class="dialog-footer">
      <el-button @click="cancelMenses">取消</el-button>
      <el-button type="primary" @click="sureMenses">确定</el-button>
    </footer>
  </div>
</template>

<script setup lang="ts">
  import { ref, Ref, toRefs, computed, ComputedRef } from 'vue'
  // 获取公共的hooks
  import { useCommon } from '../../hooks/useCommon'
  // 接口约束
  import { IMenseNum, IPageConfigStore } from '../../interface/page'
  // store数据
  import { usePageConfigStore } from '../../store/pageConfig'
  // 解构 store的配置数据, 获取光标的位置或选定对象
  const pageConfigStore: IPageConfigStore = usePageConfigStore()
  const { val } = toRefs<any>(pageConfigStore)
  // 初始化数据
  const menses: Ref<IMenseNum> = ref({
    day: 0, // 月经持续天数
    mCycle: 0, //  初潮周期
    age: 0, // 绝经年龄
    pCycle: 0, //  生理周期
  })
  const c_menses: ComputedRef<IMenseNum> = computed((): IMenseNum => {
    return !!val.value.menses ? val.value.menses : menses.value
  })

  // 获取设置属性
  const { setConfig } = useCommon()

  // 定义向父组件传值的事件
  const $emit = defineEmits<{
    (e: 'toSureMenses', c_menses: IMenseNum): void
  }>()

  // 确认月经史
  const sureMenses = (): void => {
    $emit('toSureMenses', c_menses.value)
    // 修改配置仓库
    pageConfigStore.$patch?.((state: IPageConfigStore) => {
      state.val.menses = c_menses.value
      let el = document.getElementById(state.el) as any
      if (!!el && el != null) {
        el.querySelector('.day').innerText = c_menses.value.day
        el.querySelector('.mCycleAge').innerText = c_menses.value.mCycle + '——' + c_menses.value.age
        el.querySelector('.pCycle').innerText = c_menses.value.pCycle
      }
      state.commonComponentActive = ''
      setConfig()
    })
  }

  // 取消
  const cancelMenses = (): void => {
    pageConfigStore.$patch?.((state: IPageConfigStore) => {
      state.commonComponentActive = ''
    })
  }
</script>

<style scoped lang="scss">
  .menses {
    box-shadow: 0 0 3px #ccc;
    padding: 10px;
    border-radius: 4px;
    background-color: #fff;
    width: 360px;
    h3 {
      padding: 0;
      margin: 0;
    }
  }
  .el-row {
    text-align: center;
    margin: 10px 0;
  }
  .el-col {
    padding: 0 5px;
  }
  .dialog-footer {
    border-top: 1px solid #ebebeb;
    padding-top: 10px;
  }
  :deep(.el-input-number--small) {
    width: 65px;
  }
  :deep(.el-input-number.is-controls-right .el-input__wrapper) {
    padding-left: 5px;
    padding-right: 32px;
  }
</style>
